<script setup>
import { RouterLink } from 'vue-router'

const menuItems = [
  {
    title: '菜品管理',
    path: '/dish-management',
    icon: '🍽️'  // 这里可以替换成其他图标库的图标
  },
  {
    title: '菜品分类管理',
    path: '/dish-category-management',
    icon: '📂'
  },
  {
    title: '订单管理',
    path: '/order-manage',
    icon: '📝'
  },
  {
    title: '数据统计',
    path: '/statistics',
    icon: '📊'
  }
]
</script>

<template>
  <div class="sidebar">
    <div class="logo">
      <h2>后台管理系统</h2>
    </div>
    <nav class="menu">
      <RouterLink
        v-for="item in menuItems"
        :key="item.path"
        :to="item.path"
        class="menu-item"
      >
        <span class="icon">{{ item.icon }}</span>
        <span class="title">{{ item.title }}</span>
      </RouterLink>
    </nav>
  </div>
</template>

<style scoped>
.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo h2 {
  color: white;
  font-size: 18px;
}

.menu {
  padding: 20px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-item.router-link-active {
  background-color: #1890ff;
}

.icon {
  margin-right: 10px;
}
</style>